<template>
  <div class="app-container home">


    <div class="left-part">
      <div class="top-part">
        <div class="part-item">
          <div class="left-charts">
            <div>急诊手术比率</div>
            <div style="font-weight:bold;padding:3px 0;">100%</div>
            <div>上月数量5|同比增长2%</div>
          </div>
          <div class="right-charts" id="rate"></div>
        </div>
        <div class="part-item" style="margin:0 6px">

        </div>
        <div class="part-item">

        </div>
      </div>
      <div class="bottom-part">
        <div class="part-title">
          <div class="left-title">排班情况一览</div>
          <div class="right-title">第二院区</div>
        </div>
        <div class="part-content">
          <div class="content-item" v-for="item in 28" :key="item">
            <div class="icon-wrap"></div>
            <div class="room-name">{{ item }}</div>
            <div>号间</div>
          </div>
        </div>
      </div>
    </div>


    <div class="right-part">
      <div class="top-part">
        <div class="part-item"></div>
      </div>
      <div class="bottom-part">
        
      </div>
    </div>


   
    
   
  </div>
</template>

<script setup name="Index">
const version = ref('3.8.9')
import * as echarts from 'echarts';
import { listEventmanage } from "@/api/manage/eventmanage";
function goTarget(url) {
  window.open(url, '__blank')
}
let loading=ref(true);
/** 查询事件管理列表 */
  function geshijianpeizhi() {
   
    listEventmanage({}).then(response => {
     
      sessionStorage.setItem('shijianpeizhi',JSON.stringify(response.data))
      //eventmanageList.value = proxy.handleTree(response.data, "eventId", "parentId");
     
    });
  }
  

function sysInitData(){
  loading.value = true;
  //获取事件配置
   geshijianpeizhi();

}
sysInitData();
</script>

<style scoped lang="scss">
.app-container{
  height:100%;
  overflow:auto;
  padding:0;
}
.home {
  .bottom-part{
    height:calc(100% - 156px);
    background:#fff;
      border-radius:10px;
    overflow: hidden;
      flex:1;
      background:#fff;
      margin-top:6px;

  }
  display:flex;
 .left-part{
    flex:3;
    margin-right:6px;
    .top-part{
      display:flex;
      height:150px;
      .part-item{
         border-radius:10px;
        overflow: hidden;
        flex:1;
        background:#fff;
        display:flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding:0 10px;
      }
    }
    .part-title{
      display:flex;
      justify-content: space-between;
      padding:10px 10px 10px 10px;
    }
    .part-content{
      padding:0 20px;
      box-sizing: border-box;
      border-radius:10px;
      height:calc(100% - 42px);
      overflow: auto;
      display:flex;
      flex-wrap: wrap;
       justify-content: space-around;
      .content-item{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom:8px;
        border:1px solid red;
        height:200px;
        width:13.4%;
      }
    }
   
 }

 .right-part{
  flex:1;
   .top-part{
      display:flex;
      height:150px;
      .part-item{
        border-radius:10px;
        overflow: hidden;
        flex:1;
        background:#fff;
      }
    }
 }






}
</style>

